<!--
 * @Author: lsjweiyi lsjweiyi
 * @Date: 2023-04-09 15:55:11
 * @LastEditors: lsjweiyi 759209794@qq.com
 * @LastEditTime: 2024-04-06 21:00:57
 * @FilePath: \web-ssg\pages\image\IdcardChangeColor.vue
 * @Description: 图片无损放大两倍
-->
<template>
    <div class="myBody">
        <div style="max-width: 800px" class="insideCard">
            <div>{{ "原图大小：" + (reginSize == 0 ? "--" : reginSize) + " KB" }}</div>
            <n-divider vertical />
            <div>{{ "压缩后大小：" + (resultSize == 0 ? "--" : resultSize) + " KB" }}</div>
        </div>
        <div class="buttonGroup">
            <n-h3 style="height: 100%">压缩等级(越大压缩的越多)：</n-h3>
            <n-input-number v-model:value="level" :precision="0" :min="0" :max="9" />
            <SingleFileUpload @select-file="fileChange" @upload-file="myUpload" :loading="loading"
                :disabled="!isLevelChange"></SingleFileUpload>
            <pay-and-down v-model:task-id="taskId" :tool-name="toolIMsg.name" :tool-id="toolIMsg.toolId"></pay-and-down>
            <HistoryDown :tool-name="toolIMsg.name" :tool-id="toolIMsg.toolId"></HistoryDown>
        </div>
        <div class="insideCard">
            <div style="color: red; margin-bottom: 10px">仅支持格式：png</div>
            <div style="color: red; margin-bottom: 10px">{{ "限制大小：" + maxSize + "MB" }}</div>
            <div>{{ toolIMsg.description }}</div>
            <div style="font-size: 16px; margin-top: 10px">PS：本站不收集任何个人信息，请放心使用！上传的图片在服务器约保存24小时后自动删除</div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import "@/assets/insideBody.scss";
import { createDiscreteApi } from "naive-ui";
const toolIMsg = getImageMenuItem("pngCompress");
const maxSize = 10; // 上传图片限制的大小，单位MB
useHead({
    title: toolIMsg.name,
});
useSeoMeta({
    description: toolIMsg.description,
});
const canUploadFlag = ref(true); // 已经从本地加载图片后，上传处理的按钮才可点击
const level = ref<number>(6); // 压缩率
let taskId = ref("");
const reginSize = ref(0); // 压缩前图片大小
const resultSize = ref(0); // 压缩后图片大小

const isLevelChange = ref(false); // 等级是否发生改变
const loading = ref(false); // 加载状态，防止重复点击上传按钮
// 自定义上传图像的方法覆盖默认方法
const myUpload = (file: File) => {
    loading.value = true; // 开启加载状态，防止重复点击上传按钮
    // 后端接口
    pngLosslessCompress(file, level.value, toolIMsg.toolId as number).then((res) => {
        // 后端返回的是base64位数据，需要按下面格式显示
        if (res.code < 0) {
            const { dialog } = createDiscreteApi(["dialog"]);
            dialog.error({
                title: "图像无损压缩失败！",
                content: res.data + "。如有疑问请联系管理员，日志id：" + res.logId,
                positiveText: "确定",
                onPositiveClick: () => { },
            });
            return;
        }
        taskId.value = res.taskId;
        // 获取压缩有大小
        resultSize.value = Math.round((res.data as number) / 1024);
        loading.value = false; // 关闭加载状态，允许用户点击上传按钮
        lastLevel = level.value;
    });
};

/**
 * @description: 上传文件按钮回调函数
 * @param {*} file
 * @return {*}
 */

const fileChange = (file: File, fn: (result: boolean) => void) => {
    checkFile(file, maxSize * 1024, undefined, ["image/png"]).then((res) => {
        if (res) {
            reginSize.value = Math.round(file.size / 1024);
            resultSize.value = 0;
            canUploadFlag.value = false;
            fn(true);
            taskId.value=""
        }else {
            fn(false);
        }
    });
};

let lastLevel = 0; // 上次压缩率
// 当level改变了才允许上传
watch(level, () => {
    // 当前处于不能上传时才需要判断，因为如果已经换了图片，那肯定得允许
    if (lastLevel != level.value) {
        isLevelChange.value = true;
    } else {
        isLevelChange.value = false;
    }
});
</script>
